<template>
    <div class="home-container" ref="container" v-loading="loading">
        <!-- 使用自定义指令绑定加载动画 -->
        <div
            class="banners"
            :style="{ marginTop }"
            @wheel="roll"
            @transitionend="show_text"
        >
            <Carousel
                v-for="item in data"
                :key="item.id"
                :data="item"
                ref="carousel"
            />
        </div>
        <ul class="indicator">
            <li
                v-for="(item, i) in data"
                :key="item.id"
                :class="{ active: index === i }"
                @click="index = i"
            ></li>
        </ul>
        <div class="arrow-up" @click="index--" v-show="index > 0">
            <Icon type="arrowUp" />
        </div>
        <div
            class="arrow-down"
            @click="index++"
            v-show="index < data.length - 1"
        >
            <Icon type="arrowDown" />
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex"
import Icon from "@/components/Icon"
import Carousel from "./Carousel"

export default {
    created() {
        this.$store.dispatch("banner/get_data")
    },
    mounted() {
        this.resize()
        window.addEventListener("resize", this.resize)
    },
    destroyed() {
        window.removeEventListener("resize", this.resize)
    },
    components: {
        Icon,
        Carousel
    },
    data() {
        return {
            banner_height: 0,
            index: 0,
            last_index: 0,
            switching: false // 是否正在切换中
        }
    },
    computed: {
        marginTop() {
            return -this.index * this.banner_height + "px"
        },
        ...mapState("banner", ["loading", "data"])
    },
    methods: {
        roll(e) {
            if (this.switching) {
                return
            }
            let index
            if (e.deltaY > 0) {
                // y 轴的滚动距离
                index = this.index + 1
            } else {
                index = this.index - 1
            }
            if (index < 0 || index >= this.data.length) {
                return
            }
            this.switching = true
            this.index = index
        },
        resize() {
            this.banner_height = this.$refs.container.clientHeight
        },
        show_text(e) {
            if (e.target.classList.contains("banners")) {
                this.switching = false
                const carousel = this.$refs.carousel
                // 调用子组件的方法
                carousel[this.last_index].hide()
                carousel[this.index].show()
                this.last_index = this.index
            }
        }
    }
}
</script>

<style lang="less">
@import "~@/styles/var.less";
.home-container {
    width: 100%;
    height: 100%;
    position: relative;
    > * {
        position: absolute;
    }
    .banners {
        width: 100%;
        height: 100%;
        transition: 0.8s;
        .carousel-container {
            width: 100%;
            height: 100%;
            color: #ddd;
        }
    }
    .indicator {
        top: 50%;
        transform: translateY(-50%);
        right: 20px;
        li {
            width: 7px;
            height: 8px;
            border: 1px solid #fff;
            margin-bottom: 15px;
            border-radius: 50%;
            cursor: pointer;
            &.active {
                background-color: #fff;
            }
        }
    }
    [class^="arrow"] {
        color: @secondary;
        left: 50%;
        transform: translateX(-50%);
        cursor: pointer;
        font-size: 25px;
        @gap: 20px;
        @distance: 10px;
        &.arrow-up {
            top: @gap;
            animation: jump-up 2s infinite alternate;
        }
        &.arrow-down {
            bottom: @gap;
            animation: jump-down 2s infinite alternate;
        }
        &:hover {
            color: #ccc;
        }
        @keyframes jump-up {
            from {
                transform: translate(-50%, @distance);
            }
            to {
                transform: translate(-50%, -@distance);
            }
        }
        @keyframes jump-down {
            from {
                transform: translate(-50%, -@distance);
            }
            to {
                transform: translate(-50%, @distance);
            }
        }
    }
    .loading-container {
        width: 100px;
        height: 100px;
    }
}
</style>
